<template>
  <div class="sql-agent-home">

    <div class="sql-agent-home-title">
      <img src="@/assets/sqlAgent/sql-agent-home.png" />
      <span>SQL Agent</span>
    </div>

    <div class="sql-agent-home-config">
      <div class="config-info">
        <span>Secret: <span :title="secret">{{secret}}</span></span>
        <span>Data Server: https://app.maibozhineng.com/</span>
      </div>
      <div>
        <el-button size="small" @click="hanleChangeSetting">Change Setting</el-button>
        <el-button size="small" @click="handleViewLog">View Log</el-button>
        <el-button size="small" @click="handleSaveLog">Save Log</el-button>
      </div>
    </div>

    <div class="sql-agent-home-content">
      <div class="sql-agent-home-content-search">
        <div class="flex flex-1 w-0" style="flex-wrap: wrap">
          <el-date-picker
            v-model="search.date"
            type="datetimerange"
            range-separator="-"
            start-placeholder="Start date"
            end-placeholder="End date"
            style="width:360px;margin:0 16px 16px 0;padding-top:0"
            :picker-options="pickerOptions"
            clearable
            >
          </el-date-picker>

          <el-select v-model="search.result" clearable placeholder="Choose Result" style="width:140px;margin:0 16px 16px 0">
            <el-option
              v-for="item in resultOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <el-select v-model="search.logType" clearable placeholder="Choose Type" style="width:140px;margin:0 16px 16px 0">
            <el-option
              v-for="item in typeOptions"
              :key="item.Value"
              :label="item.Text"
              :value="item.Value">
            </el-option>
          </el-select>

          <el-input v-model="search.keyWords" clearable prefix-icon="el-icon-search" placeholder="Please Enter Message" style="width:240px;margin-bottom: 16px;" />
        </div>

        <el-button type="primary" class="search" @click="handleSearch" :loading="loading">Search</el-button>
      </div>

      <div class="sql-agent-home-content-list">
        <Table :data="tableData" :loading="loading"/>
        <el-pagination
          v-show="total > 0"
          layout="prev, pager, next"
          :page-size="search.pageSize"
          :total="total"
          :current-page="search.pageIndex"
          style="text-align:center;margin-top: 15px;"
          @current-change="handleCurrentChange"
          >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Table from '@/views/modules/sql-agent/components/Table'
export default {
  data () {
    return {
      search: {
        date: [],
        result: '',
        logType: '',
        keyWords: '',
        startTime: null,
        endTime: null,
        pageSize: 15,
        pageIndex: 1
      },
      tableData: [],
      typeOptions: [],
      resultOptions: [
        {
          label: 'Success',
          value: true
        },
        {
          label: 'Error',
          value: false
        }
      ],
      loading: false,
      total: 0,
      pickerOptions: {
        // disabledDate (time) {
        //   return time > Date.now()
        // }
      },
      secret:''
    }
  },
  components: {
    Table
  },
  computed: {
    url () {
      return window.location.hostname !== 'app.maibozhineng.com' ? 'https://app.maibozhineng.com' : 'https://app.maibozhineng.com'
    }
  },
  watch: {
    'search.date': {
      handler: function (val) {
        if (!val) {
          this.search.startTime = null
          this.search.endTime = null
        } else {
          this.search.startTime = val[0]
          this.search.endTime = val[1]
        }
      }
    }
  },
  created () {
    this.getlogTypeSelect()
    this.getTableData(this.search)
    this.getSecret()
  },
  methods: {
    hanleChangeSetting () {
      this.$interface.sqlAgent.openBrowser({url:`${this.url}/Integrations?type=setting`})
    },
    handleViewLog () {
      this.$interface.sqlAgent.openBrowser({url:`${this.url}/Integrations?type=log`})
    },
    handleSearch () {
      this.search.pageIndex = 1
      let params = this._.cloneDeep(this.search)
      delete params.date

      this.getTableData(params)
    },
    async getlogTypeSelect () {
      const { data: res } = await this.$interface.sqlAgent.logTypeSelect()
      this.typeOptions = res.selects
    },
    async getTableData (params) {
      this.loading = true
      const { data: res } = await this.$interface.sqlAgent.getPage(params)
      this.tableData = res.recordInfos
      this.total = res.count
      this.loading = false
    },
    handleCurrentChange (current) {
      this.search.pageIndex = current
      this.getTableData(this.search)
    },
    handleSaveLog(){
        this.$confirm('Download the log and send it to support@mspbots.ai , please add the log as an attachment.', 'Tips', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(async () => {
          await this.$interface.sqlAgent.savelog()
        }).catch(() => {       
        });
    },
    async getSecret () {
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        loadType: 1
      }
      const {data:res} = await this.$interface.taskManager.getConnectorInfo(params)
      this.secret = res.data.SQLAGENT.secret
    }
  }
}
</script>
<style lang="scss" scoped>
.block-style{
  background: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.04);
  border-radius: 4px 4px 4px 4px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.sql-agent-home{
  display: flex;
  flex-direction: column;
  height: 100%;

  &-title{
    padding: 10px 16px;
    @extend .block-style;
    img{
      margin-right: 12px;
    }
    span{
      font-size: 20px;
      font-family: Segoe UI Variable-Semibold Display, Segoe UI Variable;
    }
  }

  &-config{
    padding: 8px 16px;
    margin:8px 0;
    justify-content: space-between;
    flex-wrap: wrap;
    @extend .block-style;
    & > div:first-child{
      display: flex;
      flex-direction: column;
      font-size: 14px;
      font-family: Segoe UI Variable-Regular, Segoe UI Variable;
      line-height: 20px;
    }
    .config-info{
      max-width: calc(100% - 350px);
      span:nth-child(1){
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  &-content{
    flex:1;
    align-items: flex-start;
    flex-direction: column;
    overflow-y: auto;
    @extend .block-style;
    &-search{
      width: 100%;
      padding: 16px 16px 0 16px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      .search{
        width: 102px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        background: #0043CE;
        border-color:#0043CE;
        flex-shrink: 0;
      }
      // ::v-deep .el-range-separator,::v-deep .el-date-editor .el-range__icon{
      //   line-height: 22px;
      // }
      .datetime{
        width: 500px;
      }
    }

    &-list{
      flex:1;
      width: 100%;
      padding:16px;
      box-sizing: border-box;
      overflow: hidden;
    }

  }
  .el-input__inner::placeholder{
    color: red;
  }
  .el-date-editor,.el-select,.el-input{
    border-radius: 4px;
  }
  ::v-deep .el-date-editor .el-range__close-icon{
    margin:-8px 0 0 8px!important;
  }
}
</style>
